<template>
	<scroll-view scroll-y="true" class="content">
		<view style="width:100%;height: 10rpx;background: #B9AC90;"></view>
		<view class="head" v-if="showQuestion==0">
			<image src="../../static/banner@2x.png" mode="aspectFill"></image>
			<view @click="showDialog">活动规则</view>
		</view>
		<view class="infomation" v-if="showQuestion==0">
			<view class="header">基本信息<text>*</text></view>
			<view class="line">
				<view class="key">姓名</view>
				<input class="value" v-model="name" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="line">
				<view class="key">手机号</view>
				<input class="value" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<button class="start" @click="start">开始答题</button>
		</view>
		<view class="question-list" v-if="showQuestion==1">
			<view class="index">
				第几题
				<view><text>{{questionIndex+1}}</text>/{{questionList.length}}</view>
			</view>
			<view>
				<view class="question"><text>{{questionIndex+1}}.{{question.question}}</text></view>
				<view class="answer-list">
					<view :class="answer.isChecked?'answer-item checked':'answer-item'" @click="chooseAnswer(i)"
						v-for="(answer,i) in question.chooseList">
						<image :src="answer.isChecked?iconList[1]:iconList[0]">
						</image>
						<view class="answer">{{answer.key}}.{{answer.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-list" v-if="showQuestion==1">
			<button style="background: #AE6059;" @click="last">{{lastText}}</button>
			<button @click="next">{{nextText}}</button>
		</view>
		<view class="side-bar" v-if="showQuestion==1">
			<view class="bar">
				<view class="top" :style="'width: '+persent+'%; !important'"></view>
				<view class="buttom"></view>
			</view>
			<view class="persent">{{persent}}%</view>
		</view>
		<view class="result" v-if="showQuestion==2">
			<image src="../../static/icon_success@2x.png" mode="aspectFill"></image>
			<view class="tip">恭喜你完成答题~</view>
			<view class="point">—<view><text>{{point}}</text>分</view>—</view>
			<button @click="showPointList">查看排名榜</button>
		</view>
		<view class="point-list" v-if="showQuestion==3">
			<view class="head">
				您目前排名第<text>{{row}}</text>名，超过了{{better}}%的用户～
			</view>
			<view class="info">
				<view class="header">
					— 分数排行榜 —
				</view>
				<view class="list">
					<view class="line top">
						<view class="item">排名</view>
						<view class="item">ID名称</view>
						<view class="item">分数</view>
						<view class="item">时间</view>
					</view>
					<view class="line" v-for="(item,index) in pointList">
						<view class="item">
							<image src="../../static/icon_no1@2x.png" v-if="index==0"></image>
							<image src="../../static/icon_no2@2x.png" v-if="index==1"></image>
							<image src="../../static/icon_no3@2x.png" v-if="index==2"></image>
							<text v-if="index>2">NO.{{index+1}}</text>
						</view>
						<view class="item">{{item.name}}</view>
						<view class="item">{{item.point}}</view>
						<view class="item">{{item.useTime}}</view>
					</view>
					<view class="buttom">
						注：活动奖品参见<text @click="showDialog">活动规则>></text>
					</view>
				</view>
			</view>
		</view>
		<cover-view class="cover" v-if="dialog" @touchmove.stop.prevent="moveHandle">
			<view class="dialog">
				<image src="../../static/icon_close@2x.png" @click="closeDialog"></image>
				<view class="title">活动规则</view>
				<text v-for="(item,index) in ruler">{{item}}</text>
			</view>
		</cover-view>
	</scroll-view>
</template>

<script>
	import {
		doGet,
		doPostForm
	} from '../../js_sdk/request-helper.js'
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	export default {
		data() {
			return {
				museummId: undefined,
				id: undefined,
				isTeam: false,
				iconList: [
					'../../static/interactive_icon_default@2x.png',
					'../../static/interactive_icon_selected@2x.png'
				],
				ruler: '',
				showQuestion: 0,
				questionIndex: undefined,
				question: undefined,
				questionList: [],
				persent: 5,
				nextText: '下一题',
				lastText: '上一页',
				dialog: false,

				name: '',
				phone: '',
				startTime: undefined,
				endTime: undefined,
				point: 0,

				row: 0,
				better: 0,
				pointList: []
			}
		},
		onLoad(options) {
			console.log(options)
			if (!options.museumId || !options.examId) {
				uni.showModal({
					title: '错误',
					content: '页面参数错误，请检查链接是否完整',
					showCancel: false,
					confirmColor: '#B9AC90',
					success: function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '../index/museumList'
							})
						}
					}
				});
				return
			}
			this.museummId = options.museumId
			this.id = options.examId
			this.getExam(this.id)
		},
		methods: {
			getExam(id) {
				doGet('/blade-museum/exam/getOne?id=' + id,
					(res) => {
						let list = []
						for (let item of res.questions) {
							item.chooseList = JSON.parse(item.chooseList)
							for (let answer of item.chooseList) {
								answer.isChecked = false
							}
							list.push(item)
						}
						this.questionList = list
						this.questionIndex = 0
						this.question = this.questionList[this.questionIndex]
						let ruler = []
						for (let item of res.description.split('\n')) {
							ruler.push(item)
						}
						this.ruler = ruler
					}, (err) => {})
			},
			chooseAnswer(index2) {
				let item = this.questionList[this.questionIndex];
				let answerList = []
				for (let index in item.chooseList) {
					let answer = item.chooseList[index]
					answer.isChecked = false
					if (index == index2) {
						answer.isChecked = true
					}
					answerList.push(answer)
				}
				this.questionList[this.questionIndex] = item
			},
			start() {
				this.checkIsJoin()
			},
			last() {
				if (this.questionIndex > 0) {
					this.questionIndex -= 1
					this.question = this.questionList[this.questionIndex]
					this.persent = (((this.questionIndex + 1) / this.questionList.length).toFixed(2) * 100).toFixed(0)
					if (this.questionIndex == 0) {
						this.lastText = '上一页'
					}
					if (this.questionIndex != this.questionList.length - 1) {
						this.nextText = '下一题'
					}
				} else {
					this.showQuestion = 0
				}
			},
			next() {
				if (this.questionIndex < this.questionList.length - 1) {
					this.questionIndex += 1
					this.question = this.questionList[this.questionIndex]
					this.persent = (((this.questionIndex + 1) / this.questionList.length).toFixed(2) * 100).toFixed(0)
					if (this.questionIndex == this.questionList.length - 1) {
						this.nextText = '提交'
					}
					if (this.questionIndex != 0) {
						this.lastText = '上一题'
					}
				} else {
					this.endTime = new Date().getTime()
					this.commit()
				}
			},
			showPointList() {
				this.getPoitnList()
			},
			showDialog() {
				this.dialog = true
			},
			closeDialog() {
				this.dialog = false
			},
			moveHandle() {},
			checkIsJoin() {
				if(!this.phone||!this.name){
					uni.showToast({
						title:'请输入姓名和手机号',
						icon:'error'
					})
					return
				}
				doGet('/blade-museum/exam/answer/check?examId=' + this.id + "&phone=" + this.phone, (res) => {
					this.showQuestion = 1
					this.startTime = new Date().getTime()
				}, (err) => {
					uni.showToast({
						title: err,
						icon: 'error'
					})
					if(err == '当前手机号已参加本次答题活动，请勿重复答题'){
						this.getPoitnList()
					}
				})
			},
			commit() {
				let answerList = [];
				for (let item of this.questionList) {
					for (let answer of item.chooseList) {
						if (answer.isChecked) {
							answerList.push({
								index: item.questionIndex,
								answer: answer.key
							})
						}
					}
				}
				if (answerList.length < this.questionList.length) {
					uni.showToast({
						title: '当前还有题目未作答，请您先答完题目',
						icon: 'error'
					})
					return
				}
				let params = {
					name: this.name,
					phone: this.phone,
					examId: this.id,
					useTime: this.endTime - this.startTime,
					answerList: JSON.stringify(answerList),
					museumId: this.museummId
				}
				doPostForm('/blade-museum/exam/answer/insert', params, (res) => {
					this.point = res.point
					this.showQuestion = 2
				}, (err) => {
					uni.showToast({
						title: err,
						icon: 'error'
					})
				})
			},
			getPoitnList() {
				doGet('/blade-museum/exam/answer/pointList?examId=' + this.id + "&phone=" + this.phone, (res) => {
					this.row = res.owner.rownum
					if (res.owner.rownum == res.owner.num) {
						if (res.owner.rownum == 1) {
							this.better = 100
						} else {
							this.better = 0
						}
					} else {
						this.better = ((res.owner.num - res.owner.rownum) / res.owner.num * 100).toFixed(0)
					}
					let list = []
					for (let item of res.list) {
						item.useTime = dateToString(new Date(item.useTime.replace(/-/g,'/')), 'mm分ss秒')
						list.push(item)
					}
					this.pointList = list
					this.showQuestion = 3
				}, (err) => {

				})
			}
		}
	}
</script>

<style>
	.cover {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: #000000b4;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cover .dialog {
		position: relative;
		width: calc(100% - 140rpx);
		padding: 40rpx 20rpx;
		min-height: 1000rpx;
		background-image: linear-gradient(135deg, #F8CB8E, #653D1D);
		display: flex;
		flex-direction: column;
	}

	.cover .dialog image {
		top: 20rpx;
		position: absolute;
		right: 20rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.cover .dialog .title {
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		margin: 50rpx 0 50rpx 0;
	}

	.cover .dialog text {
		text-align: justify;
		text-indent: 2em;
		width: 100%;
		height: auto;
		word-wrap: break-word;
		display: inline-block;
		white-space: pre-wrap;
		/* overflow: hidden; */
		margin-bottom: 20rpx;
		color: #fff;
		line-height: 50rpx;
		font-size: 28rpx;
	}


	.content {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.head {
		position: relative;
		width: 100%;
		height: 400rpx;
	}

	.head image {
		width: 100%;
		height: 400rpx;
	}

	.head view {
		position: absolute;
		bottom: 40rpx;
		right: 0;
		background: #AE6059;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx 0 0 20rpx;
		color: #fff;
	}

	.infomation {
		width: 100%;
	}

	.infomation .header {
		text-align: center;
		margin: 90rpx 0 50rpx 0;
		font-size: 36rpx;
		color: #333;
	}

	.infomation .header text {
		color: #AE6059;
	}


	.infomation .line {
		height: 100rpx;
		margin: 0 40rpx;
		border: 2rpx solid #999;
		border-radius: 10rpx;
		padding: 0 20rpx;
		width: calc(100% - 122rpx);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.infomation .line .key {
		line-height: 30rpx;
		font-size: 30rpx;
		color: #333;
		width: 100rpx;
		margin-right: 20rpx;
	}

	.infomation .line .value {
		width: 320rpx;
		font-size: 30rpx;
		color: #666;
	}

	.placeholder {
		color: #999;
	}

	.start {
		color: #fff;
		border: 0;
		line-height: 100rpx;
		border-radius: 5rpx;
		font-size: 34rpx;
		background: #B9AC90;
		margin: 200rpx 40rpx;
	}

	.question-list {
		width: calc(100% - 80rpx);
		margin: 0 40rpx;
	}

	.question-list .index {
		margin: 60rpx 0;
		font-size: 34rpx;
		color: #333;
		display: flex;
		align-items: center;

	}

	.question-list .index view {
		border: 20rpx;
		color: #333;
		margin-left: 20rpx;
		font-size: 28rpx;
		padding: 0 10rpx;
		border-radius: 20rpx;
		border: #B9AC90 solid 1px;
	}

	.question-list .index view text {
		color: #B9AC90;
	}

	.question-list .question {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 40rpx;
	}

	.question-list .answer-item {
		height: 100rpx;
		border-radius: 10rpx;
		border: 1px solid #eee;
		display: flex;
		padding: 0 20rpx;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.question-list .answer-item image {
		height: 40rpx;
		width: 40rpx;
	}

	.question-list .answer-item .answer {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.checked {
		border: 1px solid #B9AC90 !important;
	}

	.btn-list {
		margin: 120rpx 40rpx 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn-list button {
		color: #fff;
		border: 0;
		width: 320rpx;
		line-height: 100rpx;
		border-radius: 5rpx;
		font-size: 34rpx;
		background: #B9AC90;
		margin: 0;
	}

	.side-bar {
		margin: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.side-bar .bar {
		position: relative;
		height: 10rpx;
		width: 560rpx;
		margin: 100rpx 0;
	}

	.side-bar .bar .buttom {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		background: #ccc;
	}

	.side-bar .bar .top {
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		height: 10rpx;
		border-radius: 10rpx;
		background: #B9AC90;
		width: 0%;
	}

	.side-bar .persent {
		font-size: 28rpx;
		color: #333;
	}

	.result {
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.result image {
		margin-top: 100rpx;
		height: 240rpx;
		width: 300rpx;
	}

	.result .tip {
		margin-top: 40rpx;
		font-size: 32rpx;
		color: #333;
	}

	.result .point {
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
		color: #B9AC90;
		font-weight: bold;
	}

	.result .point view {
		font-size: 50rpx;
		margin: 0 40rpx;
		font-weight: normal;
	}

	.result .point view text {
		font-size: 72rpx;
	}

	.result button {
		color: #fff;
		border: 0;
		width: calc(100% - 80rpx);
		line-height: 100rpx;
		border-radius: 5rpx;
		font-size: 34rpx;
		background: #B9AC90;
		margin: 300rpx 40rpx 0 40rpx;
	}

	.point-list {
		min-height: 100%;
		padding-bottom: 40rpx;
		background: #8B662F;
	}

	.point-list .head {
		background: #FBE6D0;
		color: #333;
		height: 60rpx;
		font-size: 28rpx;
		line-height: 56rpx;
		width: calc(100% - 80rpx);
		margin: 0 40rpx;
		text-align: center;
		border-radius: 0 0 40rpx 40rpx;
	}

	.point-list .head text {
		color: #AE6059;
	}

	.point-list .info {
		margin: 40rpx 20rpx;
		width: calc(100% - 40rpx);
	}

	.point-list .info .header {
		font-size: 42rpx;
		color: #fff;
		background: #AE6059;
		height: 80rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 80rpx 80rpx 0 0;
	}

	.point-list .info .list {
		position: relative;
		background: #fff;
		width: calc(100% - 2rpx);
		border: 1rpx solid #d1bd9d;
		min-height: 1072rpx;
		padding-bottom: 72rpx;
		background-image: linear-gradient(135deg, #F8CB8E, #653D1D);
	}

	.point-list .info .list .line {
		display: flex;
		align-items: center;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-bottom: 1rpx solid #d1bd9d;
	}

	.point-list .info .list .top {
		background: #fff;
		height: 70rpx !important;
		color: #999 !important;
		font-size: 30rpx !important;
	}

	.point-list .info .list .line .item {
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		overflow: hidden;
		text-align: center;
	}

	.point-list .info .list .line .item image {
		width: 90rpx;
		height: 90rpx;
	}

	.point-list .info .list .buttom {
		height: 70rpx;
		color: #FBE6D0;
		font-size: 30rpx;
		line-height: 64rpx;
		text-align: center;
		background: #8B662F;
		width: calc(100% - 2rpx);
		position: absolute;
		bottom: 1rpx;
		left: 1rpx;
	}

	.point-list .info .list .buttom text {
		margin-left: 30rpx;
	}
</style>
